<template>
    <div style="height: 50px;">
        <el-button @click="add()">新增</el-button>
        <el-button @click="upd()">修改</el-button>
        <el-button @click="del()">删除</el-button>
        <el-button @click="Export()">导出</el-button>
    </div>

    <!-- 查询条件 -->
    <el-form :inline="true" :model="show" class="demo-form-inline">
        <el-form-item label="退料编号">
            <el-input v-model="show.StripNumber" placeholder="退料编号" clearable />
        </el-form-item>
        <el-form-item label="退料日期">
            <el-date-picker v-model="show.StripStart" value-format="YYYY-MM-DD" type="date" placeholder="退料开始日期"
                clearable />-
            <el-date-picker v-model="show.StripEnd" type="date" value-format="YYYY-MM-DD" placeholder="退料结束日期"
                clearable />
        </el-form-item>
        <el-form-item label="入库状态">
            <el-select v-model="show.StripWState" placeholder="全部" style="width: 200px;" clearable>
                <el-option label="未申请入库" :value="0" />
                <el-option label="申请完毕 未入库" :value="1" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetStrippProduct">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 显示列表 -->
    <div style="font-weight: bold; font-size: 25px; text-align: center; margin-top: 20px;margin-bottom: 20px;">生产退料列表
    </div>
    <el-table :data="stripplist" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="stripNumber" label="生产退料编号" align="center">
            <template v-slot="scope">
                <a @click="detail(scope.row)">{{ scope.row.stripNumber }}</a>
            </template>
        </el-table-column>
        <el-table-column prop="stripDate" label="退料日期" align="center">
            <template v-slot="scope">
                {{ scope.row.stripDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="stripProductNum" label="退料数量" align="center" />
        <el-table-column prop="stripWState" label="入库状态" align="center">
            <template v-slot="scope">
                {{ scope.row.stripWState == 0 ? "未申请入库" : "申请完毕 未入库" }}
            </template>
        </el-table-column>
        <el-table-column prop="date" label="操作" align="center">
            <template v-slot="scope">
                <el-button size="small" @click="shenq(scope.row.stripNumber, scope.row.productId)">申请入库</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes" :total="show.lcount">
                    <span> , 每页 {{ show.Psize }} 条，当前 {{ show.Pindex }} / {{ show.pcount }} 条</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="show.lcount">
                    <el-button :disabled="show.Pindex == 1" @click="show.Pindex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="show.lcount">
                    <el-button :disabled="show.Pindex == show.pcount" @click="show.Pindex = show.pcount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed } from 'vue'
import * as XLSX from 'xlsx';
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'


//查询条件
const show = reactive({
    Pindex: 1,
    Psize: 10,
    lcount: 0,
    pcount: 0,
    StripNumber: "",
    StripStart: "",
    StripEnd: "",
    StripWState: ""
})

//显示
const stripplist = ref([])
const GetStrippProduct = () => {
    axios.get(http.zblnb + '/sc/api/Stripping/GetStrippProduct', {
        params: {
            Pindex: show.Pindex,
            Psize: show.Psize,
            StripNumber: show.StripNumber || '',
            StripStart: show.StripStart || '',
            StripEnd: show.StripEnd || '',
            StripWState: show.StripWState || 0,
        }
    })
        .then(res => {
            console.log(res.data.data)
            stripplist.value = res.data.data.list;
            show.lcount = res.data.data.lcount;
            show.pcount = res.data.data.pcount;
        })
}

//选中列表的复选框
const check = ref([])
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(check.value)
}

//跳转添加
const add = () => {
    router.push('/AddStripping');
}

//删除条件
const DELinfo = ref({
    "stripProductId": [],
    "delName": "string",
    "office_Id": "string",
    "user_Id": 0,
})

//删除
const del = () => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            let ids = check.value.map(ele => ele.stripProductId);
            DELinfo.value.stripProductId = ids
            axios.post(http.zblnb + '/sc/api/Stripping/DelStrippProduct', DELinfo.value)
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success('删除成功')
                        GetStrippProduct();
                    }
                    else {
                        ElMessage.error('删除失败');
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        })
        .catch(() => {

        })
}

//导出
const Export = () => {
    ElMessageBox.confirm('是否确认导出?', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    })
        .then((res) => {
            if (check.value.length <= 0) {
                ElMessage.warning('请选择数据!');
                return;
            }
            //表头
            let tableData = [
                ['序号', '生产退料编号', '退料日期', '退料数量', '入库状态']
            ]
            check.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.stripNumber,
                    item.stripDate,
                    item.stripProductNum,
                    item.stripWState,
                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '生产退料') // 工作簿名称
            let name = '生产退料' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}

//跳转修改页面
const upd = () => {
    let stripNumber = check.value.map(ele => ele.stripNumber);
    let strippingId = check.value.map(ele => ele.strippingId);
    router.push('/UpdStripping?stripNumber=' + stripNumber + '&strippingId=' + strippingId);
}

//编号跳转详情
const detail = (row: any) => {
    let stripNumber = row.stripNumber
    let strippingId = row.strippingId
    router.push('/DetailStripping?stripNumber=' + stripNumber + '&strippingId=' + strippingId);
}

//申请入库
const shenq = (stripNumber: number, productId: number) => {
    router.push('/AddStrippingWarehouse?stripNumber=' + stripNumber + '&productId=' + productId);
}

onMounted(() => {
    GetStrippProduct();
})


</script>

<style></style>